<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>物料检验类型</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="material-check-type">
      <div class="material-check-type-search">
        <el-form inline label-width="auto" size="medium">
          <el-form-item label="物料名称">
            <el-input style="width:200px" v-model="searchValue"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toSearchData">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="height:calc(100% - 46px)">
        <el-table fit stripe border :data="searchMaterialList" style="width: 100%" height="parent">
          <el-table-column :resizable="false" label="物料名称" prop="materialName" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="80px" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="toSetting(scope.row)">设置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog title="设置物料检验类型" :visible.sync="openForm" top="5vh" width="600px" :close-on-click-modal="false" @closed="formClosed">
      <div style="height:calc(90vh - 54px);overflow:auto">
        <material-check-type-form v-if="openForm" :material="selectMaterial" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </material-check-type-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "./css/checkTypeDialog.css",
    "./css/checkTypeForm.css",
    "./css/materialCheckTypeForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>

<script src="../models/materialCheckTypeModel.js"></script>

<script src="./checkTypeDialog.js"></script>
<script src="./checkTypeForm.js"></script>
<script src="./materialCheckTypeForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    data: function () {
      return {
        loading: false,
        materialList: [],
        searchMaterialList:[],
        searchValue:'',
        openForm: false,
        selectMaterial: null,
        dropdownOption: {}
      };
    },

    created: function () {
      this.setMaterialList();
    },

    methods: {
      setMaterialList: function () {
        this.loading = true;
        var self = this;
        ajaxRequest('company/getMaterialConfig').then(function (materialList) {
          materialList = _.map(materialList, function (material) {
            return {
              materialName: material.materialName
            };
          });
          self.materialList = materialList;
          self.toSearchData();
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      toSearchData:function(){
        var materialList = this.materialList;
        var searchValue = this.searchValue;
        if (searchValue !== '') {
          materialList = _.filter(materialList, function(material){
            let materialName = material.materialName;
            return materialName.indexOf(searchValue) !== -1;
          });
        }
        this.searchMaterialList = materialList;
      },

      toSetting: function (material) {
        this.selectMaterial = material;
        this.openForm = true;
      },

      saveSuccess() {
        this.openForm = false;
      },

      formClosed: function () {
        this.selectMaterial = null;
      }
    },

    components: {
      MaterialCheckTypeForm: MaterialCheckTypeForm
    }
  });

</script>

<style>
  .material-check-type {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .material-check-type .material-check-type-search .el-form-item {
    margin-bottom: 10px;
  }

</style>

</html>
